<style lang="less">
@import 'vendors/bootstrap/less/bootstrap.less';
@import 'less/base.less';
@import 'less/form.less';
@import 'less/misc.less';
</style>

<template>
  <div>
   <custom-header :left.sync="lt"></custom-header>
   <router-view class="right_container" :class="lt ? 'conent_left' : ''" keep-alive></router-view>
  </div>
</template>

<script>
import CustomHeader from './components/Header'

export default {
  data () {
    return {
      lt: false
    }
  },
  components: {
    CustomHeader
  }
}
</script>

<style lang="less">
.right_container {
  position: relative;
  margin-right: auto;
  margin-top: 90px;
  margin-left: auto;
}

@media (min-width: 768px) {
  .right_container {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .right_container {
    width: 100%;
  }
}

@media (min-width: 1200px) {
  .right_container {
    width: 1170px;
  }
}

.conent_left {
	margin-left:270px;
  width: calc(~"100% - 285px");
}
</style>
